<template>
    <div class="iot_HomeMenu">
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          active-text-color="#27ba9b"
          background-color="#f7f7f7"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#000"
          @open="handleOpen"
          @close="handleClose"
        >
            <el-menu-item index="1" @click="ChangeIndexFlog(5)">
                <span>居家</span>
            </el-menu-item>
            <el-menu-item index="2" @click="ChangeIndexFlog(6)">
                <span>美食</span>
            </el-menu-item>          
            <el-menu-item index="3" @click="ChangeIndexFlog(7)">
                <span>服饰</span>
            </el-menu-item>          
            <el-menu-item index="4" @click="ChangeIndexFlog(8)">
                <span>母婴</span>
            </el-menu-item>          
            <el-menu-item index="5" @click="ChangeIndexFlog(9)">
                <span>个护</span>
            </el-menu-item>          
            <el-menu-item index="6" @click="ChangeIndexFlog(10)">
                <span>严选</span>
            </el-menu-item>          
            <el-menu-item index="7" @click="ChangeIndexFlog(11)">
                <span>数码</span>
            </el-menu-item>          
            <el-menu-item index="8" @click="ChangeIndexFlog(12)">
                <span>运动</span>
            </el-menu-item>          
            <el-menu-item index="9" @click="ChangeIndexFlog(13)">
                <span>杂项</span>
            </el-menu-item>
        </el-menu>
      </el-col>
    </el-row> 
    </div>
  </template>
  
  <script>
  import { inject } from 'vue';
    export default{
        name:'HomeMenu',
        setup(){
          const ChangeIndexFlog = inject('ChangeIndexFlog')
          return {ChangeIndexFlog}
        }
    }
  </script>

<style scoped>
  .el-col-12{
    max-width:100%;
  }
  .el-menu{
    border: 0;
  }
  .iot_HomeMenu{
    margin: 5px auto;
  }
</style>
<style>
    :root{
    --el-menu-item-height:40px !important;
  }
</style>
